<template>
  <div>
    <div ref="screenRef" class="screen">
      <p> {{ `当前状态：${isFullscreen2 ? '全屏' : '非全屏'}` }} </p>
      <p>
        <button @click="enter2">进入全屏</button>
      </p>
      <p>
        <button @click="exit2">退出全屏</button>
      </p>
      <p>
        <button @click="toggle2">切换屏幕状态</button>
      </p>
    </div>
    <p> {{ `当前状态：${isFullscreen ? '全屏' : '非全屏'}` }} </p>
    <p>
      <button @click="enter">进入全屏</button>
    </p>
    <p>
      <button @click="exit">退出全屏</button>
    </p>
    <p>
      <button @click="toggle">切换屏幕状态</button>
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// https://vueuse.org/core/useFullscreen/
import { useFullscreen } from '@vueuse/core';

const screenRef = ref();
const { isFullscreen, enter, exit, toggle } = useFullscreen();
const {
  isFullscreen: isFullscreen2,
  enter: enter2,
  exit: exit2,
  toggle: toggle2,
} = useFullscreen(screenRef);
</script>

<style scoped>
.screen {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>
